思诚科技项目实训

2023/10/17

html基础知识

打开文件

拖拽法

菜单打开

拓展插件：Chinese、Open in browser

VSCode

代码格式化

Tab 往右缩进
Shift + Tab 向左回退
一个Tab等于两个空格
设置一个Tab等于2个空格
设置键盘快捷方式大写与小写 ctrl+shift+u/l
shift + alt + ↓ 快速复制上一行
ctrl + f 搜索
ctrl + h 替换
ctrl + z 撤销
多光标修改选中修改的 ctrl+d 加上上下移动

快速写代码 [按 ctrl+i 自动导入快捷代码]

div + Tab 快速输入div块
div.red + Tab < div class=”red”> < /div>
div#box.red + Tab < div id=”box” class=”red”> < /div>
div[name=box] [title=气泡] + Tab < div name=”box” title=”气泡”> < /div>
a#link.red[href=#] [ title=我是连接] + Tab < a href=”#” id=”link” class=”red” title=”我是连接”>< /a>
div{文本} + Tab < div>aaaa< /div>
输入ul>li{项目} + Tab
```
<ul>
  <li>牛逼</li>
</ul>
```

ul#box>li.red[title=’”标题”]{项目1}

<ul id="box">
  <li class="red" title="标题">项目1</li>
</ul>

ui>li*5 一个ul标签和五个li标签 大于号是子类[父子关系]

p*3{段落$}

<p>段落1</p>
<p>段落2</p>
<p>段落3</p>

ul#nav>li.item*5{项目列表$} + Tab

<ul id="nav">
    <li class="item" 列表1=""></li>
    <li class="item" 列表2=""></li>
    <li class="item" 列表3=""></li>
    <li class="item" 列表4=""></li>
    <li class="item" 列表5=""></li>
</ul>

div[name=”box”]>p.red>span*3{文本$} + Tab

<div name="box">
    <p class="red">
        <span>文本1</span>
        <span>文本2</span>
        <span>文本3</span>
    </p>
</div>
<!--#是id    .是class    [name="box"]-->

h${标题$}*6

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

h${标题$}*6 按ctrl+i 自动导入快捷代码

(h2{标题}+p{段落})*3 [同类关系]

<h2>标题</h2>
<p>段落</p>
<h2>标题</h2>
<p>段落</p>
<h2>标题</h2>
<p>段落</p>

div#faq>h2{常见问题}dl.list>(dt{问题$}+dd{答案$})*4
div#faq>(h2{常见问题}+dl.list>(dt{问题$}+dd{答案$})*4)

<div id="faq">
    <h2>常见问题</h2>
    <dl class="list">
        <dt>问题1</dt>
        <dd>答案1</dd>
        <dt>问题2</dt>
        <dd>答案2</dd>
        <dt>问题3</dt>
        <dd>答案3</dd>
        <dt>问题4</dt>
        <dd>答案4</dd>
    </dl>
</div>

输入 ul>li{列表$$}*10 + Tab 确保位数

<ul>
    <li>列表01</li>
    <li>列表02</li>
    <li>列表03</li>
    <li>列表04</li>
    <li>列表05</li>
    <li>列表06</li>
    <li>列表07</li>
    <li>列表08</li>
    <li>列表09</li>
    <li>列表10</li>
</ul>

MarkDown语法

在VsCode预览ctrl + shift + v

中划线： ’ ~~ 1111 ~~ ‘
分割线：’— + 回车‘
超链接：’[网易] (http://www.163.com)‘
图片: ‘! [图片名称] (图片URL)‘

LOADING...